<template>
<div :class="['navbar', { isFixed: fixed, isTop, lgpad }]">
  <div class="left">
    <div class="location" v-if="location"><img src="@/assets/location.png">深圳</div>
    <div class="back" @click="$router.back()" v-if="showBack"><van-icon name="arrow-left" size="26" /><span>{{ $route.meta.title || '返回' }}</span></div>
  </div>
  <div class="right" v-if="showRight">
    <div :class="['search', { isActived }]">
      <div class="icon" @click="search"><van-icon name="search" class="font" /></div>
      <div class="input_wrap" v-if="isActived"><input @blur="search" v-model="keyword" ref="input" type="text" :placeholder="placeholder"></div>
    </div>
    <div class="more" v-if="showMore"><van-icon name="ellipsis" color="#fff" size="20"/></div>  
  </div>
</div>
</template>

<script>
import { computed, nextTick, toRefs, reactive } from 'vue'
export default {
    props: {
    actived: { //是否激活搜索
      type: Boolean,
      default: false
    },
    keyword: {
      type: String,
      default: ''
    },
    showRight: {
      type: Boolean,
      default: true
    },
    showMore: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    showBack: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入达人/商品/直播间'
    },
    location: { // 是否显示地址
      type: Boolean,
      default: false
    },
    lgpad: {
      type: Boolean,
      default: false
    },
    isTop: {
      type: Boolean,
      default: false
    }    
  },
  emits: ['updata:keyword'],
  setup (props, context) {
    const state = reactive({
      searching: false,
      input: null,
      search: () => {
        if (!props.actived) {
          state.searching = !state.searching
          if (state.searching) {
            nextTick(() => {
              state.input.focus()
            })
          }
        }      
      },
      isActived: computed(() => {
        return props.actived || state.searching
      })
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>


<style lang="scss" scoped>
.navbar {
  display: flex;
  height: 50px;
  padding: 0 12px;
  align-items: center;
  box-sizing:border-box;
  &.lgpad { margin: 0 46px; }
  &.isFixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: none;
    &.isTop {
      background-color:#2d3856
    }
  }
  .left {
     margin-right: 10px;
    .back {
      position: relative;
      font-size: 16px;
      color: white;
      display: flex;
      align-items: center;
      & > span {
        padding-left: 6px;
      }
    }    
    .location {
      display: flex;
      align-items: center;
      font-size: 12px;
      color:#999;
      margin-right: 10px;
      img {
        width: 24px;
        height: 24px;
        display: block;
        margin-right: 3px;
      }
    }
  }
  .right {
    flex: 1;
    display: flex;
    align-items: center;
    .more {
      display: flex;
      align-items: center;
      transform: rotate(-90deg);
    }
    .search {
      flex: 1;
      height: 36px;
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
      &.isActived{
        border-radius: 20px;
        align-items: center;
        background-color: white;
        .icon {
          margin: 0 10px;
        }
      }
      .icon {
        margin-right: 5px;
        position: relative;
        display: flex;
        align-items: center;
        .font { font-size: 17px; color: #999 }
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .input_wrap {
        flex: 1;
        height: 100%;
        position: relative;
        padding-left: 10px;      
        &::after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          width: 1px;
          height: 100%;
          background-color: #dadada;
          transform:scaleY(.4);
        }      
        input {
          width: 100%;
          height: 100%;
          outline: 0 none;
          appearance: none;
          border: none;
          font-size: 12px;
          padding: 0;
          display: block;
          &::placeholder {
            color: #999;
          }        
        }
      }
    }
  }
}  
</style>